<template>
	<view>
		<my-layouts :topHeight="topHeight" :bottomHeight="bottomHeight" :showBottom="currentTab === 1">
			<!-- 固定头部内容 -->
			<view class="top-box" slot="top">
				<!-- 自定义导航栏 -->
				<u-navbar autoBack placeholder title="刘伟鹏"></u-navbar>
				<!-- tabs切换 -->
				<my-tabs :tabs="tabs" v-model="currentTab"></my-tabs>
				<!-- 上门地址 -->
				<view v-show="currentTab === 1" class="shangmen-address my-flex my-align-center my-justify-center">
					<text class="u-line-1">
						上门地址：雁塔区电子正街紫薇城市花园12号楼701室2222222222222
					</text>
				</view>
			</view>
			<!-- 滚动区域内容 -->
			<view class="scroll-box" slot="scroll" :style="{
				minHeight: `calc(100vh - ${topHeight} - ${currentTab === 1 ? bottomHeight : '0px'
					})`,
				backgroundColor: currentTab === 1 ? '#f7f7f7' : '#fff',
			}">
				<!-- 患者档案组件 -->
				<view v-show="currentTab === 0">
					<patient-records :patientRecordsInfo="patientRecordsInfo"></patient-records>
				</view>
				<!-- 会话交流组件 -->
				<view v-show="currentTab === 1">
					<conversation :orderNumber="orderNumber"></conversation>
				</view>
			</view>
			<!-- 固定底部内容 -->
			<view class="bottom-box" slot="bottom">
				<!-- 底部输入框 -->
				<view class="bottom-one">
					<!-- 语音图片 -->
					<image class="icon" src="/static/message/icon-yuyin.png" mode=""></image>
					<view class="textarea-box">
						<textarea class="textarea" auto-height v-model="message" :maxlength="-1" :cursor-spacing="20" />
					</view>
					<my-button v-if="message.length > 0" width="112" height="56" fontSize="24" borderRadius="8">
						发送
					</my-button>
					<!-- 加减号按钮 -->
					<image v-else class="icon" :src="showBottom
						? '/static/message/icon-minus.png'
						: '/static/message/icon-plus.png'
						" @click="handleChangeBottom" mode=""></image>
				</view>
				<!-- 底部操作内容 -->
				<view class="bottom-two">
					<!-- 病历报告 -->
					<view class="bottom-item" @click="goWriteCaseReport">
						<image class="item-img" src="/static/message/binglibaogao.png" mode=""></image>
						<view class="item-text">病历报告</view>
					</view>
					<!-- 图片 -->
					<view class="bottom-item">
						<image class="item-img" src="/static/message/photo.png" mode=""></image>
						<view class="item-text">图片</view>
					</view>
					<!-- 上门时间 -->
					<view class="bottom-item">
						<image class="item-img" src="/static/message/shangmenshijian.png" mode=""></image>
						<view class="item-text">上门时间</view>
					</view>
					<!-- 辅料 -->
					<view class="bottom-item" @click="goMaterials">
						<image class="item-img" src="/static/message/fuliao.png" mode=""></image>
						<view class="item-text">辅料</view>
					</view>
				</view>
			</view>
		</my-layouts>
	</view>
</template>

<script>
import PatientRecords from "./components/patient-records.vue";
import Conversation from "./components/conversation.vue";
import MyLayouts from "@/chronicDisease/components/layouts/my-layouts.vue";
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
	components: {
		PatientRecords,
		Conversation,
		MyLayouts
	},
	data() {
		return {
			tabs: ["患者档案", "会话交流"],
			currentTab: 1,
			orderNumber: "", // 订单号
			userId: "", // userId
			nextReqMessageID: "", // 下一条消息的id
			patientRecordsInfo: {}, // 患者记录信息
			message: "", // 文字消息内容
			textAreaHeight: uni.upx2px(76), // 文本域高度
			showBottom: false, // 是否显示底部内容
			ifCase: 1,
			ifMateriel: 1,
			messageList: [], // 聊天消息列表
		};
	},
	computed: {
		topHeight({ currentTab }) {
			const { statusBarHeight } = uni.getSystemInfoSync() || {};
			return currentTab === 1
				? uni.upx2px(180) + 44 + (statusBarHeight || 0) + "px"
				: uni.upx2px(92) + 44 + (statusBarHeight || 0) + "px";
		},
		bottomHeight({ textAreaHeight, showBottom }) {
			return showBottom
				? textAreaHeight + uni.upx2px(32) + uni.upx2px(312) + "px"
				: textAreaHeight + uni.upx2px(32) + "px";
		},
	},
	watch: {
		// 监听文本框变化，动态修改文本框高度
		message(val) {
			if (!val) {
				this.textAreaHeight = uni.upx2px(76);
			} else {
				this.$nextTick(async () => {
					const result = await this.$utils.getRect(".textarea-box");
					this.textAreaHeight = result.height;
				});
			}
		},
	},
	onLoad(options) {
		if (options.orderNumber && options.userId) {
			this.orderNumber = options.orderNumber;
			this.userId = options.userId;
			this._getIfCaseAndIfMateriel();
			this._patientArchives();
			this._getMessageList();
		}
	},
	methods: {
		// 查询患者档案
		async _patientArchives() {
			const [err, res] = await this.$toAwait(
				this.$api.message.patientArchives({
					orderNumber: this.orderNumber,
				})
			);
			if (err) return;
			console.log("查询患者档案", res.data);
			this.patientRecordsInfo = res.data || {};
		},
		// 根据订单号查询是否开过病例和辅料订单
		async _getIfCaseAndIfMateriel() {
			const [err, res] = await this.$toAwait(
				this.$api.message.getIfCaseAndIfMateriel({
					orderNumber: this.orderNumber,
				})
			);
			if (err) return;
			console.log("查询是否开过病例和辅料订单", res.data);
			const { ifCase, ifMateriel } = res.data || {};
			this.ifCase = ifCase || 1;
			this.ifMateriel = ifCase || 1;
		},
		// 获取聊天记录
		async _getMessageList() {
			const res = await this.$im.getMessageList(
				"C2C" + this.userId,
				this.nextReqMessageID
			);
		},
		// 切换底部显示隐藏
		handleChangeBottom() {
			this.showBottom = !this.showBottom;
		},
		// 开病历报告
		goWriteCaseReport() {
			if (this.ifCase === 2) {
				return this.$utils.showToast("您已创建过病历报告，不可重复创建");
			}
			uni.navigateTo({
				url:
					"/pages/message/write-case-report/write-case-report?patientRecordsInfo=" +
					this.$utils.sendMsg({
						...this.patientRecordsInfo,
						orderNumber: this.orderNumber,
					}),
			});
		},
		// 跳转辅料
		goMaterials() {
			if (this.ifMateriel === 2) {
				return this.$utils.showToast("您已创建过辅料订单，不可重复创建");
			}
			uni.navigateTo({
				url:
					"/pages/message/materials/materials?orderNumber=" + this.orderNumber,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.shangmen-address {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	padding: 0 40rpx;

	text {
		display: inline-block;
		width: 100%;
		font-size: 28rpx;
	}
}

// 固定底部内容
.bottom-box {
	background-color: #fff;

	.bottom-one {
		width: 100%;
		padding: 16rpx 28rpx;
		display: flex;
		align-items: center;

		.icon {
			width: 56rpx;
			height: 56rpx;
		}

		.textarea-box {
			display: flex;
			align-items: center;
			margin: 0 28rpx;
			width: 0;
			flex: 1;
			max-height: 200rpx;
			overflow-y: auto;
			min-height: 76rpx;
			background-color: #f7f7f7;
			padding: 20rpx 28rpx;

			.textarea {
				width: 100%;
				font-size: 28rpx;
			}
		}
	}

	.bottom-two {
		width: 100%;
		height: 312rpx;
		border-top: 4rpx solid #f7f7f7;
		padding: 32rpx 56rpx;
		background-color: #fff;
		display: flex;

		.bottom-item {
			margin-right: 84rpx;
			text-align: center;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.item-img {
				width: 96rpx;
				height: 96rpx;
			}

			.item-text {
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
	}
}
</style>
